import * as React from 'react';

import type {Meta, StoryObj} from '@storybook/react-webpack5';

import {Showcase} from '../../../demo/Showcase';
import {ShowcaseItem} from '../../../demo/ShowcaseItem';
import {UserLabel} from '../UserLabel';

const meta: Meta<typeof UserLabel> = {
    title: 'Components/Data Display/UserLabel',
    component: UserLabel,
    parameters: {
        a11y: {
            context: '#storybook-root',
            config: {
                rules: [
                    {
                        id: 'color-contrast',
                        enabled: false,
                        selector: '.g-user-label__description',
                    },
                ],
            },
        },
    },
};

export default meta;

type Story = StoryObj<typeof UserLabel>;

const person = 'Charles Darwin';
const email = 'charles.darwin@gmail.com';
const personImg =
    '';
const avatarAriaProps = {
    'aria-label': `${person}'s avatar`,
};

const personProps = {
    avatar: avatarAriaProps,
    text: person,
    description: email,
};

const imageProps = {
    avatar: {
        ...avatarAriaProps,
        imgUrl: personImg,
        alt: 'Fake person',
    },
    text: person,
    description: email,
};

const emailProps = {
    type: 'email' as const,
    avatar: {
        ...avatarAriaProps,
        alt: 'Sample envelope icon',
    },
    text: email,
};

const emptyProps = {
    type: 'empty' as const,
    text: person,
    description: email,
};

const closeableProps = {
    ...personProps,
    onCloseClick: () => console.log('closed'),
};

export const Default: Story = {
    args: personProps,
};

export const Image: Story = {
    args: imageProps,
};

export const Email: Story = {
    args: emailProps,
};

export const Empty: Story = {
    args: emptyProps,
};

export const LongText: Story = {
    args: {
        avatar: avatarAriaProps,
        text: person.repeat(100),
    },
};

export const Clickable: Story = {
    args: {
        avatar: avatarAriaProps,
        text: person,
        onClick: () => console.log('clicked'),
    },
};

export const Closable: Story = {
    args: closeableProps,
};

export const UserLabelShowcase: Story = {
    name: 'Showcase',
    render: () => {
        return (
            <React.Fragment>
                <Showcase title="Person">
                    <ShowcaseItem title="3xs">
                        <UserLabel {...personProps} size="3xs" />
                    </ShowcaseItem>
                    <ShowcaseItem title="2xs">
                        <UserLabel {...personProps} size="2xs" />
                    </ShowcaseItem>
                    <ShowcaseItem title="xs">
                        <UserLabel {...personProps} size="xs" />
                    </ShowcaseItem>
                    <ShowcaseItem title="s">
                        <UserLabel {...personProps} size="s" />
                    </ShowcaseItem>
                    <ShowcaseItem title="m">
                        <UserLabel {...personProps} size="m" />
                    </ShowcaseItem>
                    <ShowcaseItem title="l">
                        <UserLabel {...personProps} size="l" />
                    </ShowcaseItem>
                    <ShowcaseItem title="xl">
                        <UserLabel {...personProps} size="xl" />
                    </ShowcaseItem>
                </Showcase>
                <Showcase title="Image">
                    <ShowcaseItem title="3xs">
                        <UserLabel {...imageProps} size="3xs" />
                    </ShowcaseItem>
                    <ShowcaseItem title="2xs">
                        <UserLabel {...imageProps} size="2xs" />
                    </ShowcaseItem>
                    <ShowcaseItem title="xs">
                        <UserLabel {...imageProps} size="xs" />
                    </ShowcaseItem>
                    <ShowcaseItem title="s">
                        <UserLabel {...imageProps} size="s" />
                    </ShowcaseItem>
                    <ShowcaseItem title="m">
                        <UserLabel {...imageProps} size="m" />
                    </ShowcaseItem>
                    <ShowcaseItem title="l">
                        <UserLabel {...imageProps} size="l" />
                    </ShowcaseItem>
                    <ShowcaseItem title="xl">
                        <UserLabel {...imageProps} size="xl" />
                    </ShowcaseItem>
                </Showcase>
                <Showcase title="Email">
                    <ShowcaseItem title="3xs">
                        <UserLabel {...emailProps} size="3xs" />
                    </ShowcaseItem>
                    <ShowcaseItem title="2xs">
                        <UserLabel {...emailProps} size="2xs" />
                    </ShowcaseItem>
                    <ShowcaseItem title="xs">
                        <UserLabel {...emailProps} size="xs" />
                    </ShowcaseItem>
                    <ShowcaseItem title="s">
                        <UserLabel {...emailProps} size="s" />
                    </ShowcaseItem>
                    <ShowcaseItem title="m">
                        <UserLabel {...emailProps} size="m" />
                    </ShowcaseItem>
                    <ShowcaseItem title="l">
                        <UserLabel {...emailProps} size="l" />
                    </ShowcaseItem>
                    <ShowcaseItem title="xl">
                        <UserLabel {...emailProps} size="xl" />
                    </ShowcaseItem>
                </Showcase>
                <Showcase title="Empty">
                    <ShowcaseItem title="3xs">
                        <UserLabel {...emptyProps} size="3xs" />
                    </ShowcaseItem>
                    <ShowcaseItem title="2xs">
                        <UserLabel {...emptyProps} size="2xs" />
                    </ShowcaseItem>
                    <ShowcaseItem title="xs">
                        <UserLabel {...emptyProps} size="xs" />
                    </ShowcaseItem>
                    <ShowcaseItem title="s">
                        <UserLabel {...emptyProps} size="s" />
                    </ShowcaseItem>
                    <ShowcaseItem title="m">
                        <UserLabel {...emptyProps} size="m" />
                    </ShowcaseItem>
                    <ShowcaseItem title="l">
                        <UserLabel {...emptyProps} size="l" />
                    </ShowcaseItem>
                    <ShowcaseItem title="xl">
                        <UserLabel {...emptyProps} size="xl" />
                    </ShowcaseItem>
                </Showcase>
                <Showcase title="Closable">
                    <ShowcaseItem title="3xs">
                        <UserLabel {...closeableProps} size="3xs" />
                    </ShowcaseItem>
                    <ShowcaseItem title="2xs">
                        <UserLabel {...closeableProps} size="2xs" />
                    </ShowcaseItem>
                    <ShowcaseItem title="xs">
                        <UserLabel {...closeableProps} size="xs" />
                    </ShowcaseItem>
                    <ShowcaseItem title="s">
                        <UserLabel {...closeableProps} size="s" />
                    </ShowcaseItem>
                    <ShowcaseItem title="m">
                        <UserLabel {...closeableProps} size="m" />
                    </ShowcaseItem>
                    <ShowcaseItem title="l">
                        <UserLabel {...closeableProps} size="l" />
                    </ShowcaseItem>
                    <ShowcaseItem title="xl">
                        <UserLabel {...closeableProps} size="xl" />
                    </ShowcaseItem>
                </Showcase>
                <Showcase title="View">
                    <ShowcaseItem title="outlined / s">
                        <UserLabel {...personProps} view="outlined" size="s" />
                    </ShowcaseItem>
                    <ShowcaseItem title="outlined / l">
                        <UserLabel {...personProps} view="outlined" size="l" />
                    </ShowcaseItem>
                    <ShowcaseItem title="clear / s">
                        <UserLabel {...personProps} view="clear" size="s" />
                    </ShowcaseItem>
                    <ShowcaseItem title="clear / l">
                        <UserLabel {...personProps} view="clear" size="l" />
                    </ShowcaseItem>
                </Showcase>
            </React.Fragment>
        );
    },
};
